/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2016, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
.w1, .w2 {
	position: relative;
	height: 100%;
}

.tabular-holder {
    @include absPosDefault();
}

.tabular,
table {
	box-sizing: border-box;
	border-spacing: 0;
	border-collapse: collapse;
	display: table;
	font-size: 0.75rem;
	position: relative;
	width: 100%;
	thead, .thead,
	tbody tr, .tbody .tr {
		width: 100%;
	}
	thead, .thead {
		border-bottom: 1px solid $colorTabHeaderBorder;
	}

	&:not(.fixed-header) tr th {
		background-color: $colorTabHeaderBg;
	}

	tbody, .tbody {
		display: table-row-group;
	}
	tr, .tr {
        border-top: 1px solid $colorTabBorder;
		display: table-row;
		&:first-child .td {
			border-top: none;
		}
		&.group-header {
			td, .td {
				$d: 5%;
				background-color: pushBack($colorTabHeaderBg, $d);
				color: pushBack($colorTabHeaderFg, $d);
			}
		}
		th, .th, td, .td {
			display: table-cell;
            font-size: 0.7rem;
		}
		th, .th {
			border-left: 1px solid $colorTabHeaderBorder;
			color: $colorTabHeaderFg;
			padding: $tabularTdPadTB $tabularTdPadLR;
			white-space: nowrap;
			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
			&:first-child {
				border-left: none;
			}
			&.sort {
				&.sort:after {
					color: $colorIconLink;
					font-family: symbolsfont;
					font-size: 8px;
					content: "\e906";
					display: inline-block;
					margin-left: $interiorMarginSm;
				}
				&.sort.desc:after {
					content: "\e907";
				}
			}
			&.sortable {
				cursor: pointer;
			}
		}
		td, .td {
			min-width: 20px;
			color: $colorTelemFresh;
			padding: $tabularTdPadTB $tabularTdPadLR;
			word-wrap: break-word;
			vertical-align: top;
			&.numeric {
				text-align: right;
			}
			&.s-cell-type-value {
				text-align: right;
				.l-cell-contents {
					border-radius: $smallCr;
					padding-left: $itemPadLR;
					padding-right: $itemPadLR;
				}
			}
		}
	}
	&.filterable {
		tbody, .tbody {
			top: $tabularHeaderH * 2;
		}
		input[type="text"] {
			box-sizing: border-box;
			width: 100%;
		}
	}

	&.fixed-header {
		height: 100%;
		thead, .thead,
		tbody tr, .tbody .tr {
			display: table;
			table-layout: fixed;
		}
		thead, .thead {
			width: calc(100% - 10px);
			&:before {
				content: "";
				display: block;
				z-index: 0;
				position: absolute;
				width: 100%;
				height: $tabularHeaderH;
				background-color: $colorTabHeaderBg;
			}
		}
		tbody, .tbody {
			@include absPosDefault(0);
			top: $tabularHeaderH;
			display: block;
			overflow-y: scroll;
		}
	}
	&.t-event-messages {
		td, .td {
			min-width: 150px;
		}
	}
}
